<template>
    <view class="nickName">
        <view class="uni-input-box">
            <input class="uni-input" placeholder="请输入备注" confirm-type="done" maxlength="100"
                placeholder-style="color: #F5F5F5;" v-model="remarks" @input="textChange" />
            <view class="uni-text">{{ number }}/100</view>
        </view>
        <button form-type="submit" @tap="submitForm" class="uni-buttons">提交</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            remarks: '',
            number: 0,
            index: 0
        }
    },
    onLoad(options) {
        this.index = options.index
        this.remarks = options.remarks || ''
    },
    methods: {
        submitForm() {
            console.log(this.remarks)
            if (!this.remarks) {
                return uni.showToast({
                    title: '请输入备注',
                    icon: 'none'
                })

            }
            let pages = getCurrentPages()
            // 2. 上一页面实例
            // 注意是length长度，所以要想得到上一页面的实例需要 -2
            // 若要返回上上页面的实例就 -3，以此类推
            let prevPage = pages[pages.length - 2]
            prevPage.$vm.getList(this.remarks, this.index)

            // 4. 返回上一页面
            uni.navigateBack({
                delta: 1 // 返回的页面数
            })
        },
        textChange(e) {
            this.number = e.detail.value.length
        }
    },
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}

.nickName {
    padding: 30upx;

    .uni-input-box {
        position: relative;
        width: 100%;
    }

    .uni-text {
        position: absolute;
        right: 24upx;
        top: 28upx;
        color: #939393;
        font-size: 26upx;
    }

    .uni-input {
        font-size: 26upx;
        background-color: #F5F5F5;
        border-radius: 6px;
        padding: 24upx 130upx 24upx 24upx;
    }

    .uni-buttons {
        background-color: #359BEF;
        color: #ffffff;
        border-radius: 40px;
        margin: 130upx 0upx;
        font-size: 30upx;
    }
}
</style>